<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		</style>
	</head>
	<body>
		<!-- 子组件 bar.vue  -->
		<!-- <template> -->
			<div class="search-box">
				<div @click="say" :title="title" class="icon-dismiss"></div>
			</div>
		<!-- </template> -->
		
		<script src="js/vue.js"></script>
		<script>
			export default {
				props: {
					title: {
						type: String,
						default: ''
					}
				}
			}, methods: {
				say() {
					console.log('明天不上班');
					this.$emit('helloWorld')
				}
			}
		</script> 
		
		<!-- 父组件 bar.vue  -->
		<div class="container">
			<bar :title="title" @helloWorld="helloWorld"></bar>
		</div>
		
		<script>
			import Bar from './bar.vue'
			export default {
				data() {
					return {
						title: "我是标题"
					}
				},
				methods: {
					helloWorld() {
						console.log('我接收到子组件传递的事件了')
					}
				},
				components: {
					Bar
				}
		</script>
	</body>
</html>
